<template>
	<div :class="className">
		<Chart :cdata="cdata" />
	</div>
</template>

<script>
import geoCoordMap from './geoCoordMap.js';
import Chart from './chart';

export default {
    components: {
        Chart,
    },
    props: {
        className: { type: String, default: '' },
        isMock: { type: Boolean, default: false },
    },
    data() {
        return {
            dataTimer: null,
            cdata: [],
        };
    },
    mounted() {
        if (this.isMock) {
            this.mock();
            return;
        }

        this.getData();
        this.setTimer();
    },
    beforeUnmount() {
        if (this.dataTimer) {
            clearInterval(this.dataTimer);
            this.dataTimer = null;
        }
    },
    methods: {
        setTimer() {
            this.dataTimer = setInterval(async () => {
                await this.getData();
            }, 17000); // 17s
        },
        mock() {
            this.dataTimer = setInterval(() => {
                this.cdata = geoCoordMap.map(s => ({ name: s.name, state: 1 }));

                for (let index = 0; index < this.cdata.length; index++) {
                    const v1 = Math.round(Math.random() * 10);
                    this.cdata[index].state = Math.max(v1 % 5, 1);
                }
            }, 2000);
        },
        async getData() {
            try {
                const resp = await this.$API.scadaequipstateapi.state.get();
                if (resp.code === 200) {
                    // runningMode: 0->未知；1->手动；2->自动
                    // runningState：1->运行中；2->警报中；3->急停；4->离线

                    this.cdata = resp.data?.map(s => ({
                        name: s.equipmentCode,
                        state: s.runningState,
                    })) ?? [];
                }
            } catch {
                console.warn("[equep-oee] 无响应数据");
            }
        }
    }
}
</script>
